<template>
  <view class="clock-container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <view class="status-left">
        <view class="close-btn" @click="goToApps">
          <text class="close-icon">✕</text>
        </view>
      </view>
      <view class="status-center">
        <text class="date-text">{{ fullDate }}</text>
        <text class="lunar-text">{{ lunarDate }}</text>
      </view>
      <view class="status-right">
        <view class="icon-btn">
          <text class="icon">💡</text>
        </view>
        <view class="icon-btn">
          <text class="icon">👁</text>
        </view>
        <view class="icon-btn">
          <text class="icon">⏰</text>
        </view>
      </view>
    </view>

    <!-- 翻页时钟主体 -->
    <view class="flip-clock-main">
      <view class="time-display">
        <!-- 小时十位 -->
        <view class="flip-card">
          <view class="card-inner" :class="{ flipping: hourTenFlipping }">
            <view class="card-front">
              <text class="digit">{{ hourTen }}</text>
            </view>
            <view class="card-back">
              <text class="digit">{{ nextHourTen }}</text>
            </view>
          </view>
        </view>

        <!-- 小时个位 -->
        <view class="flip-card">
          <view class="card-inner" :class="{ flipping: hourOneFlipping }">
            <view class="card-front">
              <text class="digit">{{ hourOne }}</text>
            </view>
            <view class="card-back">
              <text class="digit">{{ nextHourOne }}</text>
            </view>
          </view>
        </view>

        <!-- 分隔符 -->
        <view class="separator">
          <view class="dot"></view>
          <view class="dot"></view>
        </view>

        <!-- 分钟十位 -->
        <view class="flip-card">
          <view class="card-inner" :class="{ flipping: minuteTenFlipping }">
            <view class="card-front">
              <text class="digit">{{ minuteTen }}</text>
            </view>
            <view class="card-back">
              <text class="digit">{{ nextMinuteTen }}</text>
            </view>
          </view>
        </view>

        <!-- 分钟个位 -->
        <view class="flip-card">
          <view class="card-inner" :class="{ flipping: minuteOneFlipping }">
            <view class="card-front">
              <text class="digit">{{ minuteOne }}</text>
            </view>
            <view class="card-back">
              <text class="digit">{{ nextMinuteOne }}</text>
            </view>
          </view>
        </view>

        <!-- 分隔符 -->
        <view class="separator">
          <view class="dot"></view>
          <view class="dot"></view>
        </view>

        <!-- 秒钟十位 -->
        <view class="flip-card">
          <view class="card-inner" :class="{ flipping: secondTenFlipping }">
            <view class="card-front">
              <text class="digit">{{ secondTen }}</text>
            </view>
            <view class="card-back">
              <text class="digit">{{ nextSecondTen }}</text>
            </view>
          </view>
        </view>

        <!-- 秒钟个位 -->
        <view class="flip-card">
          <view class="card-inner" :class="{ flipping: secondOneFlipping }">
            <view class="card-front">
              <text class="digit">{{ secondOne }}</text>
            </view>
            <view class="card-back">
              <text class="digit">{{ nextSecondOne }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部设置和名言 -->
    <view class="bottom-section">
      <view class="settings-btn">
        <text class="settings-icon">⚙</text>
      </view>
      <view class="quote-section">
        <text class="quote-text">{{ dailyQuote }}</text>
      </view>
    </view>

    <!-- 底部指示器 -->
    <view class="bottom-indicator"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前时间数字
      hourTen: '2', hourOne: '2',
      minuteTen: '4', minuteOne: '0',
      secondTen: '2', secondOne: '5',
      
      // 下一个数字（用于翻页动画）
      nextHourTen: '2', nextHourOne: '2',
      nextMinuteTen: '4', nextMinuteOne: '0',
      nextSecondTen: '2', nextSecondOne: '5',
      
      // 翻页状态
      hourTenFlipping: false, hourOneFlipping: false,
      minuteTenFlipping: false, minuteOneFlipping: false,
      secondTenFlipping: false, secondOneFlipping: false,
      
      // 日期信息
      fullDate: '',
      lunarDate: '',
      
      // 名言
      dailyQuote: '每个天才的产生，必是热忱的产物。——本杰明·狄斯拉里',
      
      timer: null
    }
  },
  
  onLoad() {
    this.updateDateTime()
    this.startTimer()
  },
  
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  
  methods: {
    updateDateTime() {
      const now = new Date()
      
      // 获取时间
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      
      // 检查并执行翻页动画
      this.checkAndFlip('hourTen', hours[0])
      this.checkAndFlip('hourOne', hours[1])
      this.checkAndFlip('minuteTen', minutes[0])
      this.checkAndFlip('minuteOne', minutes[1])
      this.checkAndFlip('secondTen', seconds[0])
      this.checkAndFlip('secondOne', seconds[1])
      
      // 更新日期
      this.updateDateInfo(now)
    },
    
    checkAndFlip(position, newValue) {
      if (this[position] !== newValue) {
        this[`next${position.charAt(0).toUpperCase() + position.slice(1)}`] = newValue
        this[`${position}Flipping`] = true
        
        setTimeout(() => {
          this[position] = newValue
          this[`${position}Flipping`] = false
        }, 300)
      }
    },
    
    updateDateInfo(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const weekDay = weekDays[date.getDay()]
      const zodiac = this.getZodiacSign(date.getMonth() + 1, date.getDate())
      
      this.fullDate = `${year}年${month}月${day}日 ${weekDay} ${zodiac}`
      this.lunarDate = '乙巳蛇年 闰六月廿九' // 简化的农历显示
    },
    
    getZodiacSign(month, day) {
      const signs = [
        '摩羯座', '水瓶座', '双鱼座', '白羊座', '金牛座', '双子座',
        '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座'
      ]
      const dates = [20, 19, 21, 20, 21, 22, 23, 23, 23, 24, 23, 22]
      return signs[day < dates[month - 1] ? (month - 2 + 12) % 12 : month - 1]
    },
    
    startTimer() {
      this.timer = setInterval(() => {
        this.updateDateTime()
      }, 1000)
    },
    
    goToApps() {
      uni.navigateTo({
        url: '/pages/dashboard/dashboard'
      })
    }
  }
}
</script>

<style scoped>
.clock-container {
  min-height: 100vh;
  background: #2d2d2d;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 顶部状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60rpx 40rpx 40rpx;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.close-btn, .icon-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid rgba(255, 255, 255, 0.2);
}

.close-icon {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}

.icon {
  font-size: 32rpx;
}

.status-center {
  text-align: center;
}

.date-text {
  display: block;
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.lunar-text {
  font-size: 24rpx;
  color: #999999;
}

/* 翻页时钟主体 */
.flip-clock-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40rpx;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.flip-card {
  width: 160rpx;
  height: 200rpx;
  perspective: 1000rpx;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
  transform-style: preserve-3d;
}

.card-inner.flipping {
  transform: rotateX(-180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: #404040;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 8rpx 32rpx rgba(0, 0, 0, 0.3),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.1);
  border: 1rpx solid #555555;
}

.card-back {
  transform: rotateX(180deg);
}

.digit {
  font-size: 120rpx;
  font-weight: 300;
  color: #ffffff;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  line-height: 1;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.separator {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  align-items: center;
  margin: 0 10rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  background: #666666;
  border-radius: 50%;
}

/* 底部区域 */
.bottom-section {
  display: flex;
  align-items: center;
  padding: 40rpx;
  gap: 30rpx;
}

.settings-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid rgba(255, 255, 255, 0.2);
}

.settings-icon {
  font-size: 32rpx;
  color: #ffffff;
}

.quote-section {
  flex: 1;
}

.quote-text {
  font-size: 28rpx;
  color: #cccccc;
  line-height: 1.5;
  font-weight: 300;
}

/* 底部指示器 */
.bottom-indicator {
  width: 200rpx;
  height: 8rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4rpx;
  margin: 0 auto 40rpx;
}

/* 横屏适配 */
@media screen and (orientation: landscape) {
  .clock-container {
    flex-direction: row;
    align-items: center;
  }
  
  .status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 30rpx 40rpx 20rpx;
  }
  
  .date-text {
    font-size: 28rpx;
    margin-bottom: 5rpx;
  }
  
  .lunar-text {
    font-size: 20rpx;
  }
  
  .flip-clock-main {
    flex: 1;
    padding: 80rpx 40rpx 40rpx;
  }
  
  .flip-card {
    width: 120rpx;
    height: 160rpx;
  }
  
  .digit {
    font-size: 90rpx;
  }
  
  .time-display {
    gap: 15rpx;
  }
  
  .separator {
    margin: 0 8rpx;
  }
  
  .dot {
    width: 10rpx;
    height: 10rpx;
  }
  
  .bottom-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 40rpx 30rpx;
  }
  
  .quote-text {
    font-size: 24rpx;
  }
  
  .bottom-indicator {
    width: 150rpx;
    height: 6rpx;
    margin: 0 auto 20rpx;
  }
  
  .close-btn, .icon-btn, .settings-btn {
    width: 60rpx;
    height: 60rpx;
  }
  
  .close-icon, .icon, .settings-icon {
    font-size: 24rpx;
  }
}

/* 竖屏小屏幕适配 */
@media screen and (max-width: 750rpx) and (orientation: portrait) {
  .flip-card {
    width: 120rpx;
    height: 160rpx;
  }
  
  .digit {
    font-size: 80rpx;
  }
  
  .time-display {
    gap: 15rpx;
  }
  
  .separator {
    margin: 0 5rpx;
  }
}
</style>
